<script setup>
import { ref } from "vue";
import { useCounterStore } from '../stores/content'
const files = ref([]);
const store = useCounterStore()

const treeRef = ref();
const fileUpdate = () => {
    fetch("/api/file/read", {
        method: "POST",
        headers: {
            "Content-Type": "application/json"
        },
        body: JSON.stringify({
            path: "test.txt"
        })
    }).then(res => res.json()).then(data => {
        console.log(data);
    })
}
const fileRead = (keys, data) => {
    if (data.node.is_dir) {
        return
    }
    let path = keys.pop()
    history.pushState(null, "",path )
    store.gotoPath(path)
}
const dirRead = () => {
    fetch("/content/", { method: "GET", headers: { "Content-Type": "application/json" }, }).then(res => res.json()).then(data => {
        files.value = data;
    })
}
const fileDelete = () => {
    console.log('save');
}
const fieldNames = { key: "path", title: "name" }
dirRead()
</script>
<template>
    <div>
        <div>
            <a-button @click="fileUpdate" size="mini">新建文件</a-button>
            <a-button @click="fileUpdate" size="mini">新建文件夹</a-button>
            <a-button @click="dirRead" size="mini">刷新</a-button>
        </div>
        <a-tree ref="treeRef" action-on-node-click="expand" blockNode :field-names="fieldNames" :data="files" @select="fileRead" />
    </div>
</template>